<template>
  <a-modal
    width="40%"
    style="z-index: 999"
    title="发布文章"
    :visible="visible"
    :confirm-loading="confirmLoading"
    cancel-text="取消发布"
    ok-text="发布文章"
    @ok="handleOk"
    @cancel="handleCancel"
  >
<!--    @afterClose="modelClose"-->
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="文章封面">
        <a-upload
          action="http://localhost:4000/updateFiles"
          list-type="picture-card"
          :file-list="fileList"
          @preview="handlePreview"
          @change="handleChange"
        >
          <div v-if="fileList.length < 8">
            <a-icon type="plus" />
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>

        <a-modal
          :visible="previewVisible"
          :footer="null"
          @cancel="handleCancel"
        >
          <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
      </a-form-model-item>
      <a-form-model-item label="文章分类">
        <a-checkbox-group v-model="form.belongs">
          <a-checkbox
            v-for="(item, index) in classblist"
            :key="index"
            :value="item.id"
            name="type"
          >
            {{ item.name }}
          </a-checkbox>
        </a-checkbox-group>
      </a-form-model-item>
      <a-form-model-item label="文章类型">
        <a-radio-group v-model="form.resource">
          <a-radio value="1"> 原创 </a-radio>
          <a-radio value="2"> 爬虫数据 </a-radio>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
import mixins from '@/mixins/mixins'
import { add } from '../api/api'

export default {
  mixins:[mixins],
  props: {
    title: {
      type: String,
      default: '',
    },
    txt: {
      type: String,
      default: '',
    },
    cb: {
      // 显示回调
      type: Function,
      default: () => {},
    },
    cbClose: {
      // 关闭回调
      type: Function,
      default: () => {},
    },
    echoData:{ // 修改的参数
      type:Object,
      default:{}
    },
    classblist: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        belongs: [],
        resource: '',
      },
      previewVisible: false,
      previewImage: '',
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
    }
  },
  mounted() {
    this.cb()
    this.visible = true
  },
  watch:{
    echoData:{
      handler(newValue,loaValue){
        console.log(newValue,loaValue,'***')
        for (let i = 0; i < newValue.cover.length; i++) {
          this.fileList.push({
            uid:new Date().getTime(),
            url:newValue.cover[i]?.replaceAll(/\\+/g,'/')
          })
        }

        this.form.belongs = newValue.belongs?.split(',')?.map(item=>parseInt(item))
      },
      immediate:true,
      deep:true
    }
  },
  methods: {

    async handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds'
      this.confirmLoading = true
      const cover = [];
      this.fileList.forEach((item) => {
        if (item?.response?.code === 200) {
          cover.push(item?.response?.data?.accessPath)
        }else{
          cover.push(item?.url)
        }
      })
      const sendBlogadd = {
        ...this.form,
        belongs: String(this.form.belongs),
        title: this.title,
        txt: this.txt,
        cover,
      }
      console.log(sendBlogadd)
      // const addok = await add(sendBlogadd)
      // console.log(addok)
      // if (addok) {
      //   this.$message.success('发布文章成功')
      //   this.visible = false
      //   this.confirmLoading = false
      //   this.cbClose()
      //   localStorage.removeItem('saveData')
      // } else {
      //   this.$message.success('发布文章失败，稍后在尝试')
      // }
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
      this.cbClose()
    },
  },
}
</script>

<style>
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
